<template>
  <div @touchmove="scoor()">
    <!-- 头部 -->
    <ul class="menu_top_list book_view_top">
      <li @click="add"><span>返回</span></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 内容 -->
    <div class="yuedu read_Frame">
      <div style="text-indent: 2em;text-align: left;">
        <p v-for="(item, index) in readList" :key="'ifo-' + index">{{ item.novel }}</p>
      </div>
      <div class="yuedu_menu">
        <!-- <router-link tag="span" :to="'/book?id=' + JKL" v-if=" this.score <JKL">上一章</router-link> -->
        <!-- <router-link tag="span" :to="'/read?id=' + pbe" v-if=" this.score >=JKL">上一章</router-link> -->
        <span @click="redu()">上一章</span>
        <router-link tag="span" :to="'/book?id=' + JKL">目录</router-link>
        <!-- <router-link tag="span" :to="'/read?id=' + scoreP" v-if=" this.orangeNum <=JKL">下一章</router-link>
                <router-link tag="span" :to="'/book?id=' + JKL" v-if=" this.orangeNum >JKL">下一章</router-link> -->
        <span @click="addPage()">下一章</span>
      </div>
    </div>

  </div>
</template>
<script>

import { Toast } from "vant";

import { getMu, getBook, getList } from '@/api/home';
import axios from 'axios';

export default {
  data() {
    return {
      num: null,
      orangeNum: null,
      bookId: null,
      ACfun: null,
      JKL: null,
      book: {},
      score: null,
      pbe: null,
      scoreP: null,
      scrollTop: "",//距离顶部的距离
      scrollHeight: "",//总共的高
      offsetHeight: "",//当前页面的高
      page: null,//页数
      boo: [],
      lookList: [],
      readList: null

    }
  },


  methods: {

       //下一章
    addPage() {
      // this.$router.push({
      //     path: `/read?id=${book.id}`  ,
      //     method: "get",
      //  } )

      console.log("page",this.page);

      if (
    this.page == 3*this.bookId-1
        // this.page == 2 ||
        // this.page == 5 ||
        // this.page == 8 ||
        // this.page == 11 ||
        // this.page == 14 ||
        // this.page == 17 ||
        // this.page == 20 ||
        // this.page == 23 ||
        // this.page == 26 ||
        // this.page == 29 ||
        // this.page == 32 ||
        // this.page == 35 ||
        // this.page == 38 ||
        // this.page == 41 ||
        // this.page == 44 ||
        // this.page == 47 ||
        // this.page == 50 ||
        // this.page == 53 ||
        // this.page == 56 ||
        // this.page == 59 ||
        // this.page == 62 ||
        // this.page == 65 ||
        // this.page == 68 ||
        // this.page == 71 ||
        // this.page == 74 ||
        // this.page == 77 ||
        // this.page == 80 ||
        // this.page == 83



      ) {
        this.page == this.page;
        setTimeout(() => {
          Toast("这是最后一章哦");
        }, 1000);
      }
      else {
        this.page += 1;
        this.goTopa();
      }

    },
       //上一章
    redu() {
   
      console.log("page",this.page);
      if (
      
        this.page == 0 || 
        this.page == 3*this.bookId
    
        // this.page == 3 ||
        // this.page == 6 ||
        // this.page == 9 ||
        // this.page == 12 ||
        // this.page == 15 ||
        // this.page == 18 ||
        // this.page == 21 ||
        // this.page == 24 ||
        // this.page == 27 ||
        // this.page == 30 ||
        // this.page == 33 ||
        // this.page == 36 ||
        // this.page == 39 ||
        // this.page == 42 ||
        // this.page == 45 ||
        // this.page == 48 ||
        // this.page == 51 ||
        // this.page == 54 ||
        // this.page == 57 ||
        // this.page == 60 ||
        // this.page == 63 ||
        // this.page == 66 ||
        // this.page == 69 ||
        // this.page == 72 ||
        // this.page == 75 ||
        // this.page == 78 ||
        // this.page == 81
      ) {
        this.page == this.page;
        Toast("这是第一章哦,前面没有咯");
      } else {
        this.page -= 1;
      }
      this.goTopa();
    },
    add() {
      this.$router.go(-1);
      localStorage.removeItem("loglevel:webpack-dev-server");
      // console.dir(this);
      // console.log(1);
    },
    getBookFun() {
       // 获取json数据
      getBook({ id: this.$route.query.id }).then(data => {
        let arr = data.sf



        let index = arr.findIndex(item => item.id == this.$route.query.id);
        var obj = arr.splice(index, 1);
        this.bookId=this.$route.query.id
        console.log("bookid",this.bookId);


        // console.log("obj=", obj);

        this.book = obj[0]
        // console.log("book", this.book);


        var num = this.$route.query.id;


        var ace = Math.ceil(num / 3)
        this.JKL = ace
        // console.log("jkl=>" ,this.JKL);
        var bce = Math.ceil((num - 1) / 3);
        var th = parseInt(num) + 1

        var ac = Math.ceil(th / 3);
        this.orangeNum = ac
        var Number = Math.ceil(num - 1);
        this.pbe = Number
        this.scoreP = th

        this.score = bce;
        // console.log("score=>" ,this.score);
        // console.log("pbe=>",this.pbe);
        // console.log("scoreP=>",this.scoreP);
        // console.log("orangeNum=>",this.orangeNum);

      })
    },

       //滚动前往下一章
    scoor() {
      //当前高度
      this.scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //总高度
      this.scrollHeight = document.body.scrollHeight;
      //当前屏幕高度
      this.offsetHeight = document.body.offsetHeight;

      if (this.scrollTop + this.offsetHeight + 1 >= this.scrollHeight) {
        const toast = Toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中",
        });

        let second = 1;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast.message = `倒计时 ${second} 秒`;
          } else {
            clearInterval(timer);
            // 手动清除 Toast
            Toast.clear();
          }
        }, 1000);
        this.flag = true;
        setTimeout(() => {
          if (this.flag == false) {
            return;
          }
          this.addPage();
          this.flag = false;
        }, 1000);
      }
    },
    // 回到顶部
    goTopa() {
      let timer = null,
        _that = this;
      cancelAnimationFrame(timer);
      requestAnimationFrame(function fn() {
        if (_that.scrollTop > 0) {
          _that.scrollTop -= 1000;
          document.body.scrollTop = document.documentElement.scrollTop =
            _that.scrollTop;
          timer = requestAnimationFrame(fn);
        }
      });
    },

    getListFun() {
      getList().then(data => {
        this.lookList = data;

        this.page = this.$route.query.id - 1

        this.readList = this.lookList[this.page].lookArr

        console.log("list=", this.lookList.length);

      })

    }



  },
  created() {
    console.log("idd", this.$route.query);
    if ("id" in this.$route.query) {
      this.getBookFun();
      this.getListFun()

    }

  },


  // watch: {
  //     $route() {
  //         location.reload();

  //     }
  // }
}

</script>
<style lang="scss">
.avtop {
  margin-top: 46.8px;
}

.yuedu {
  margin-top: 46.8px;
}

read_Frame {
  overflow: hidden;
  padding: 11.718px;
}
</style>
